<template>
	<el-container class="index-box">
		<el-aside width="asideWidth">
			<menus @openPage="openPage" :isCollapse="isCollapse" />
		</el-aside>
		<el-container>
			<el-header>
				<headers :user="user" :isCollapse="isCollapse" />
			</el-header>
			<el-main>
				<Index v-if="currentPage === 'index'" /></Index><!-- 如果点击首页 -->
				<cun-qing-jian-jie v-if="currentPage === 'cunqingjianjie'"></cun-qing-jian-jie><!-- 如果点击村情简介 -->
				<zu-zhi-jia-gou v-if="currentPage === 'zuzhijiagou'"></zu-zhi-jia-gou><!-- 如果点击组织架构 -->
				<zhi-ze-zhi-du v-if="currentPage === 'zhizezhidu'"> </zhi-ze-zhi-du><!-- 如果点击职责制度 -->
				<jue-ce-lei v-if="currentPage === 'juecelei'"></jue-ce-lei><!-- 村级 决策类 事项清单 -->
				<guan-li-lei v-if="currentPage === 'guanlilei'"></guan-li-lei><!-- 村级 管理类 事项清单 -->
				<fu-wu-lei v-if="currentPage === 'fuwulei'"></fu-wu-lei><!-- 村级 服务类 事项清单 -->
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import Menus from '@/components/menus/menus'
	import Headers from '@/components/header/header'
	import Index from '@/components/page/index'
	import CunQingJianJie from '@/components/page/page-one/page-item-one.vue'//村情简介
	import ZuZhiJiaGou from '@/components/page/page-one/page-item-tow.vue'//组织架构
	import ZhiZeZhiDu from '@/components/page/page-tow/page-item-one.vue'//职责制度
	import JueCeLei from '@/components/page/page-three/page-item-one.vue'//村级 决策类 事项清单
	import GuanLiLei from '@/components/page/page-three/page-item-two.vue'//村级 管理类 事项清单
	import FuWuLei from '@/components/page/page-three/page-item-three.vue'//村级 服务类 事项清单
	export default {
		data() {
			return {
				isRouterAlive: true,
				currentPage: 'index'
			}
		},
		computed: {
			...mapState(['user', 'isCollapse'])
		},
		components: {
			Menus,
			Headers,
			Index,
			CunQingJianJie,
			ZuZhiJiaGou,
			ZhiZeZhiDu,
			JueCeLei,
			GuanLiLei,
			FuWuLei
		},
		onLoad() {
			if (!this.user._id) {
				uni.redirectTo({
					url: '../login/login'
				})
			}
		},
		methods: {
			openPage(page) {
				this.currentPage = page
			}
		}
	}
</script>

<style lang="less" scoped>
	.index-box {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		height: 100%;

		.el-container {
			height: 100%;
			.el-main {
				height: 100%;
			}
		}

		.el-aside {
			background-color: #20222A;
			height: 100%;
			min-height: 100%;
		}

		.el-header {
			border-bottom: 1px solid #f6f6f6;
			box-sizing: border-box;
			background-color: #fff;
			line-height: 60px;
		}
	}
</style>
